import Hammer from 'hammerjs'//引用hammerjs
 
//定义缩放方法，接收一个element参数：使用export暴露该方法
export function zoomElement(el){
 
	var x = 0;//x轴偏移
	var y = 0;//y轴偏移
	var lastScale = 1;//上次缩放值
	var currentScale = 1;//当前缩放值
	var center;//双指中心点
	
	//初始化hammer
	var hammer = new Hammer(el);
	//缩放事件默认是关闭的，需要设置启用
	hammer.get('pinch').set({ enable: true });
	
	//监听缩放事件
	hammer.on("pinchmove pinchstart pinchin pinchout",e => {
		//缩放开始时获取上一次缩放值与双指中心点
	    if(e.type == "pinchstart"){
	        lastScale = currentScale || 1;
			center = e.center;
			console.log("centerX:"+center.x)
			console.log("centerY:"+center.y)
	    }
		//当前缩放值 = 上一次缩放值 * 缩放比例
	    currentScale = lastScale * e.scale;
		
		//如果缩放值小于1，重置为1
		if (currentScale < 1){
			currentScale = 1;
		}
		
		//偏移量 = 双指中心点 - 当前缩放值 * 双指中心点 = 双指中心点 *（1-当前缩放值）
		x = center.x * (1-currentScale)
		y = center.y * (1-currentScale)
		
		//设置transform
	    el.style.transform="translateX("+(x)+"px)"+"translateY("+(y)+"px)"+"scale(" + (currentScale)+ ")"
	});
	//监听滑动事件
	hammer.on('panright panleft panup pandown',(e)=>{
		//滑动时：偏移量 = 滑动距离 + 当前偏移量
		var translateX = e.deltaX + x
		var translateY = e.deltaY + y
		//如果偏移X值大于0：表示视图已经滑到最左侧，重置为0
		if (translateX > 0){
			translateX = 0
		}
		//如果偏移Y值大于0：表示视图已经滑到最顶部，重置为0
		if (translateY > 0){
			translateY = 0
		}
		//如果偏移X值小于（屏幕宽度-元素宽度）：表示视图已经滑到最左侧，重置为0
		//屏幕宽度 = el.clientWidth
		//元素宽度 = el.getBoundingClientRect().width
		if (translateX < el.clientWidth - el.getBoundingClientRect().width){
			translateX = el.clientWidth - el.getBoundingClientRect().width
		}
		//如果偏移Y值大于（屏幕高度-元素高度）：表示视图已经滑到最左侧，重置为0
		//屏幕高度 = el.clientHeight
		//元素高度 = el.getBoundingClientRect().height
		if (translateY < el.clientHeight - el.getBoundingClientRect().height){
			translateY = el.clientHeight - el.getBoundingClientRect().height
		}
		//设置transform
	    el.style.transform="translateX("+(translateX)+"px)"+"translateY("+(translateY)+"px)"+"scale(" + (currentScale)+ ")"
	});
	hammer.on('panend',(e)=>{
		//滑动结束：记录当前偏移量 
	    x = e.deltaX + x;
	    y = e.deltaY + y;
	    console.log("panendx:"+x)
	    console.log("panendy:"+y)
	})
}